<template>
  <view class="recycle-page">
    <!-- 选择回收袋 -->
    <view class="section-card">
      <view class="section-title">请选择回收袋</view>
      
      <view class="bag-selector" @tap="selectBag">
        <view class="bag-content">
          <view v-if="!selectedBag.id" class="empty-bag">
            <view class="bag-icon">
              <text class="bag-emoji">🛍️</text>
            </view>
            <view class="bag-text">
              <text class="bag-title">暂无回收袋</text>
              <text class="bag-subtitle">点击申领</text>
            </view>
          </view>
          
          <view v-else class="selected-bag">
            <view class="bag-icon">
              <text class="bag-emoji">{{ selectedBag.icon }}</text>
            </view>
            <view class="bag-info">
              <text class="bag-name">{{ selectedBag.name }}</text>
              <text class="bag-spec">{{ selectedBag.spec }}</text>
            </view>
          </view>
        </view>
        
        <view class="bag-action">
          <text class="action-text">地址簿</text>
          <text class="action-icon">📍</text>
        </view>
      </view>
    </view>

    <!-- 选择回收地址 -->
    <view class="section-card">
      <view class="section-title">请选择回收地址</view>
      
      <view class="address-selector" @tap="selectAddress">
        <view class="address-content">
          <view v-if="!selectedAddress.id" class="empty-address">
            <text class="empty-text">没有地址，请点击添加回收地址</text>
          </view>
          
          <view v-else class="selected-address">
            <view class="address-info">
              <text class="address-name">{{ selectedAddress.name }}</text>
              <text class="address-detail">{{ selectedAddress.detail }}</text>
            </view>
          </view>
        </view>
        
        <view class="address-action">
          <text class="action-text">地址簿</text>
          <text class="action-icon">📍</text>
        </view>
      </view>
      
      <!-- 仓库信息提示 -->
      <view class="warehouse-tip">
        <view class="warehouse-icon">🏠</view>
        <text class="warehouse-text">请选择地址，查看最近的仓库信息</text>
      </view>
    </view>

    <!-- 回收流程展示 -->
    <view class="process-section">
      <view class="section-title">回收流程</view>
      
      <view class="process-grid">
        <!-- 第一行 -->
        <view class="process-row">
          <view class="process-step">
            <view class="step-number">01</view>
            <view class="step-icon">🆓</view>
            <text class="step-text">小程序免费租赁回收袋</text>
          </view>
          
          <view class="step-arrow">→</view>
          
          <view class="process-step">
            <view class="step-number">02</view>
            <view class="step-icon">👷</view>
            <text class="step-text">待工作人员上门配送回收袋</text>
          </view>
          
          <view class="step-arrow">→</view>
          
          <view class="process-step">
            <view class="step-number">03</view>
            <view class="step-icon">📦</view>
            <text class="step-text">收集可回收物(需清洗)</text>
          </view>
        </view>

        <!-- 第二行 -->
        <view class="process-row">
          <view class="process-step">
            <view class="step-number">04</view>
            <view class="step-icon">📱</view>
            <text class="step-text">小程序扫码下单</text>
          </view>
          
          <view class="step-arrow">→</view>
          
          <view class="process-step">
            <view class="step-number">05</view>
            <view class="step-icon">🚚</view>
            <text class="step-text">回收员上门取袋并发放新袋</text>
          </view>
          
          <view class="step-arrow">→</view>
          
          <view class="process-step">
            <view class="step-number">06</view>
            <view class="step-icon">💰</view>
            <text class="step-text">等待收益</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="bottom-action">
      <view class="service-fee">
        <text class="fee-label">预估服务费</text>
        <text class="fee-amount">¥{{ serviceFee }}</text>
      </view>
      
      <button 
        class="submit-btn"
        :class="{ 'btn-disabled': !canSubmit }"
        :disabled="!canSubmit"
        @tap="submitOrder"
      >
        立即下单
      </button>
    </view>
  </view>
  <!-- 自定义底部导航栏 -->
  <custom-tab-bar ref="tabBar" />
</template>

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
import { ref, computed, onMounted } from 'vue'

const selectedBag = ref({})
const selectedAddress = ref({})

const serviceFee = computed(() => {
  return canSubmit.value ? '5.00' : '0.00'
})

const canSubmit = computed(() => {
  return selectedBag.value.id && selectedAddress.value.id
})

onMounted(() => {
  // 设置自定义tabbar选中状态
  if (typeof getApp().globalData.setTabBarIndex === 'function') {
    getApp().globalData.setTabBarIndex(2)
  }
})

const selectBag = () => {
  uni.navigateTo({
    url: '/pages/bag-select/bag-select'
  })
}

const selectAddress = () => {
  uni.navigateTo({
    url: '/pages/address/address'
  })
}

const submitOrder = () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: '请先选择回收袋和回收地址',
      icon: 'none'
    })
    return
  }

  uni.showModal({
    title: '确认下单',
    content: '确定要提交回收订单吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '提交中...'
        })
        
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '订单提交成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/orders/orders'
            })
          }, 1500)
        }, 2000)
      }
    }
  })
}

// 监听页面返回，更新选中的数据
uni.$on('bagSelected', (bag) => {
  selectedBag.value = bag
})

uni.$on('addressSelected', (address) => {
  selectedAddress.value = address
})
</script>

<style lang="scss" scoped>
.recycle-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx 32rpx 200rpx;
}

.section-card {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.bag-selector {
  border: 4rpx dashed #8BC34A;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.bag-selector:active {
  background: rgba(139, 195, 74, 0.05);
}

.bag-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.empty-bag {
  display: flex;
  align-items: center;
}

.selected-bag {
  display: flex;
  align-items: center;
}

.bag-icon {
  margin-right: 24rpx;
}

.bag-emoji {
  font-size: 64rpx;
}

.bag-text {
  display: flex;
  flex-direction: column;
}

.bag-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.bag-subtitle {
  font-size: 24rpx;
  color: #8BC34A;
  margin-top: 4rpx;
}

.bag-info {
  display: flex;
  flex-direction: column;
}

.bag-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.bag-spec {
  font-size: 24rpx;
  color: #666;
  margin-top: 4rpx;
}

.bag-action {
  display: flex;
  align-items: center;
  color: #8BC34A;
}

.action-text {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.action-icon {
  font-size: 24rpx;
}

.address-selector {
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  transition: all 0.3s ease;
}

.address-selector:active {
  background: #f0f0f0;
}

.address-content {
  flex: 1;
}

.empty-text {
  font-size: 26rpx;
  color: #999;
}

.selected-address {
  display: flex;
  align-items: center;
}

.address-info {
  display: flex;
  flex-direction: column;
}

.address-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.address-detail {
  font-size: 24rpx;
  color: #666;
  margin-top: 4rpx;
}

.address-action {
  display: flex;
  align-items: center;
  color: #8BC34A;
}

.warehouse-tip {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: rgba(139, 195, 74, 0.1);
  border-radius: 12rpx;
}

.warehouse-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
}

.warehouse-text {
  font-size: 24rpx;
  color: #666;
  flex: 1;
}

.process-section {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.process-grid {
  margin-top: 24rpx;
}

.process-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.process-row:last-child {
  margin-bottom: 0;
}

.process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 160rpx;
}

.step-number {
  font-size: 20rpx;
  color: #8BC34A;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.step-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}

.step-text {
  font-size: 18rpx;
  color: #666;
  line-height: 1.3;
}

.step-arrow {
  font-size: 20rpx;
  color: #8BC34A;
  margin: 0 8rpx;
  font-weight: bold;
}

.bottom-action {
  position: fixed;
  bottom: 140rpx;
  left: 0;
  right: 0;
  background: white;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-fee {
  display: flex;
  flex-direction: column;
}

.fee-label {
  font-size: 22rpx;
  color: #999;
}

.fee-amount {
  font-size: 32rpx;
  color: #8BC34A;
  font-weight: 600;
  margin-top: 4rpx;
}

.submit-btn {
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 24rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  box-shadow: 0 8rpx 24rpx rgba(139, 195, 74, 0.3);
  transition: all 0.3s ease;
}

.submit-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(139, 195, 74, 0.3);
}

.btn-disabled {
  background: #ccc !important;
  box-shadow: none !important;
}
</style>